<template>
  <div style="margin-top: -20px">
    <div style="display: flex;margin-bottom: 0px;align-items: center">
      <div>
        <el-button
          type="primary"
          size="mini"
          plain
          @click="fanhui()"
        >
          返回
        </el-button>
      </div>
      <h1 style="margin-left: 15px">查看资产</h1>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">资产详情</el-menu-item>
      <el-menu-item index="2">许可证({{ total }})</el-menu-item>
      <el-menu-item index="3">资产组件({{ total1 }})</el-menu-item>
      <el-menu-item index="4">资产({{ total2 }})</el-menu-item>
      <el-menu-item index="5">历史记录({{ total3 }})</el-menu-item>
      <el-menu-item index="6">资产维护({{ whtotal }})</el-menu-item>
      <el-menu-item index="7">资产文件({{ fileTotal }})</el-menu-item>
    </el-menu>
    <div class="line"></div>
    <!--资产详情-->
    <template v-if="activeIndex === '1'&&chooseItemTwo">
      <el-row style="width: 100%;margin-top: 30px">
        <el-col :span="12">
          <el-form v-if="chooseItemTwo">
            <el-form-item label="状态">
              <span>{{ chooseItemTwo.status1?chooseItemTwo.status1:'--' }}</span>
            </el-form-item>
            <el-form-item label="资产名称">
              <span>{{ chooseItemTwo.name?chooseItemTwo.name:'--' }}</span>
            </el-form-item>
            <el-form-item label="序列号">
              <span>{{ chooseItemTwo.serial?chooseItemTwo.serial:'--' }}</span>
            </el-form-item>
            <el-form-item label="标签">
              <span>{{ chooseItemTwo.asset_tag ?chooseItemTwo.asset_tag:'--' }}</span>
            </el-form-item>
            <el-form-item label="最后一次借出时间">
              <span>{{ chooseItemTwo.last_checkout?chooseItemTwo.last_checkout:'--' }}</span>
            </el-form-item>
            <el-form-item label="预计归还时间">
              <span>{{ chooseItemTwo.expected_checkin?chooseItemTwo.expected_checkin:'--' }}</span>
            </el-form-item>
            <el-form-item label="归还次数">
              <span>{{ chooseItemTwo.checkin_counter }}</span>
            </el-form-item>
            <el-form-item label="借出次数">
              <span>{{ chooseItemTwo.checkout_counter }}</span>
            </el-form-item>
            <el-form-item label="申请次数">
              <span>{{ chooseItemTwo.requests_counter }}</span>
            </el-form-item>
            <el-form-item label="借出至">
              <span>{{ chooseItemTwo.assigned_to?chooseItemTwo.assigned_to:'--' }}</span>
            </el-form-item>
            <el-form-item label="制造商">
              <span>{{ chooseItemTwo.manufacturer_name ?chooseItemTwo.manufacturer_name :'--' }}</span>
            </el-form-item>
            <el-form-item label="资产分类">
              <span>{{ chooseItemTwo.categories_name?chooseItemTwo.categories_name:'--' }}</span>
            </el-form-item>
            <el-form-item label="资产型号">
              <span>{{ chooseItemTwo.model_name?chooseItemTwo.model_name:'--' }}</span>
            </el-form-item>
            <el-form-item label="labels">
              <el-button icon="el-icon-full-screen" @click="createdLabel()">生成标签</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form>
            <el-form-item label="自带设备">
              <template>
                <div style="display: flex;align-items: center;margin-top: 8px">
                  <img v-if="chooseItemTwo.byod" src="../../../../assets/images/dui.png" style="width: 20px;height: 20px" />
                  <img v-if="!chooseItemTwo.byod" src="../../../../assets/images/cuo.png" style="width: 20px;height: 20px" />
                </div>
              </template>
            </el-form-item>
            <el-form-item label="物理设备">
              <template>
                <div style="display: flex;align-items: center;margin-top: 8px">
                  <img v-if="chooseItemTwo.physical" src="../../../../assets/images/dui.png" style="width: 20px;height: 20px" />
                  <img v-if="!chooseItemTwo.physical" src="../../../../assets/images/cuo.png" style="width: 20px;height: 20px" />
                </div>
              </template>
            </el-form-item>
            <el-form-item label="购买时间">
              <span>{{ chooseItemTwo.purchase_date?chooseItemTwo.purchase_date:'--' }}</span>
            </el-form-item>
            <el-form-item label="采购价格">
              <span>{{ chooseItemTwo.purchase_cost?chooseItemTwo.purchase_cost:'--' }}</span>
            </el-form-item>
            <el-form-item label="当前值">
              <span>{{ chooseItemTwo.name?chooseItemTwo.name:'--' }}</span>
            </el-form-item>
            <el-form-item label="订单号">
              <span>{{ chooseItemTwo.order_number?chooseItemTwo.order_number:'--' }}</span>
            </el-form-item>
            <el-form-item label="供应商">
              <span>{{ chooseItemTwo.supplier_name?chooseItemTwo.supplier_name:'--' }}</span>
            </el-form-item>
            <el-form-item label="折旧">
              <span>{{ chooseItemTwo.dependencies_name?chooseItemTwo.dependencies_name:'--' }}</span>
            </el-form-item>
            <el-form-item label="质保月数">
              <span>{{ chooseItemTwo.warranty_months?chooseItemTwo.warranty_months:'--' }}</span>
            </el-form-item>
            <el-form-item label="产品寿命日期">
              <span>{{ chooseItemTwo.asset_eol_date?chooseItemTwo.asset_eol_date:'--' }}</span>
            </el-form-item>
            <el-form-item label="备注">
              <span>{{ chooseItemTwo.notes?chooseItemTwo.notes:'--' }}</span>
            </el-form-item>
            <el-form-item label="新增时间">
              <span>{{ chooseItemTwo.create_datetime?chooseItemTwo.create_datetime:'--' }}</span>
            </el-form-item>
            <el-form-item label="更新日期">
              <span>{{ chooseItemTwo.update_datetime?chooseItemTwo.update_datetime:'--' }}</span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </template>
    <!--许可证-->
    <template v-if="activeIndex === '2'">
      <BorrowTooList key="zujian1" :asset-id="this.chooseItemTwo.id+''" asset-type="license" assigned-type="asset" @updateNumber="updateNumberXkz"></BorrowTooList>
    </template>
    <!--资产组件-->
    <template v-if="activeIndex === '3'">
      <BorrowTooList1 key="zujian2" :asset-id="this.chooseItemTwo.id+''" asset-type="component" assigned-type="asset" @updateNumber="updateNumberZj"></BorrowTooList1>
    </template>
    <!--资产-->
    <template v-if="activeIndex === '4'&&assetList">
      <el-table v-loading="loading" :data="assetList">
        <!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column width="200" label="资产名称" align="left" prop="name">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="设备图片" align="center" prop="image">
          <template slot-scope="scope">
            <img v-if="scope.row.image" :src="scope.row.image" style="width: 50px;height: 50px" />
          </template>
        </el-table-column>
        <el-table-column width="200" label="资产标签" align="left" prop="asset_tag" />
        <el-table-column width="200" label="序列号" align="left" prop="serial" />
        <el-table-column width="200" label="资产型号" align="left" prop="model_name" />
        <el-table-column width="200" label="资产状态" align="center" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status1">{{ scope.row.status1 }}</span>
            <el-tag v-if="scope.row.assigned_to_name" type="success" style="margin-left: 12px">已分配</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200" label="位置" align="center" prop="location_name" />
        <el-table-column width="200" label="采购价格" align="center" prop="purchase_cost" />
        <el-table-column v-if="false" width="200" label="归还/借出" align="center" prop="assigned_to" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.assigned_to_name"
              plain
              :disabled="scope.row.status!=='deployable'"
              type="primary"
              size="mini"
              @click="changeInOut(0,scope.row)"
            >归还</el-button>
            <el-button
              v-if="!scope.row.assigned_to_name"
              plain
              :disabled="scope.row.status!=='deployable'"
              type="primary"
              size="mini"
              :loading="exportLoading"
              @click="changeInOut(1,scope.row)"
            >借出</el-button>
          </template>
        </el-table-column>
        <el-table-column v-if="false" width="200" label="盘点" align="center" prop="assigned_to" fixed="right">
          <template slot-scope="scope">
            <el-button
              plain
              :disabled="false"
              type="primary"
              size="mini"
              @click="panPoint(scope.row)"
            >盘点</el-button>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作" align="center" prop="assigned_to" fixed="right">
          <template>
            <el-button
              plain
              :disabled="false"
              type="primary"
              size="mini"
              @click="fanhui"
            >查看</el-button>
          </template>
        </el-table-column>
        <el-table-column width="200" label="借至" align="left" prop="assigned_to_name">
          <template slot-scope="scope">
            <span>{{ scope.row.assigned_to_name?scope.row.assigned_to_name:'--' }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" label="供应商" align="left" prop="supplier_name" />
        <el-table-column v-if="false" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['admin:assets:assets:put']"
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              v-hasPermi="['admin:assets:assets:delete']"
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total2>0"
        :total="total2"
        :page.sync="queryParams2.pageNum"
        :limit.sync="queryParams2.pageSize"
        @pagination="getList2"
      />
    </template>
    <!--历史记录-->
    <template v-if="activeIndex === '5'">
      <HistoryList :asset-id="this.chooseItemTwo.id+''" asset-type="asset" @updateNumber="updateNumberLsjl"></HistoryList>
    </template>
    <!--资产维护-->
    <template v-if="activeIndex === '6'&&chooseItemTwo">
      <maintain :assets_id="chooseItemTwo.id" @updateNumber="updateNumberWh"></maintain>
    </template>
    <!--资产文件-->
    <template v-if="activeIndex === '7'&&chooseItemTwo">
      <file :category-type="categoryTypeName" :file-id="chooseItemTwo.id" @updateNumber="updateNumberFile"></file>
    </template>

    <el-dialog title="条形码展示" :visible.sync="codeShow" width="60%">
      <div v-if="chooseItemTwo" style="display: flex;align-items: center;justify-content: center;flex-direction: column">
        序列号：{{ chooseItemTwo.serial }}
        <barcode v-if="codeValue&&showBarCode" :value="codeValue" :type="codeType" :options="options"></barcode>
        <canvas v-if="codeValue&&showQr" id="canvas" style="margin-top: 50px"></canvas>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="codeShow = false">知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import QRCode from "qrcode";
import FileUpload from "@/components/FileUpload/index";
import maintain from "./component/maintain";
import Barcode from "vue-barcode";
import HistoryList from "@/views/components/HistoryList";
import BorrowTooList from "@/views/components/BorrowTooList1";
import BorrowTooList1 from "@/views/components/BorrowTooList1";

import file from "@/views/components/file";
import { listAsset, listMaintenances } from "@/api/vadmin/assets/assets";
import { listUploads } from "@/api/file";
import { listComponentrecords } from "@/api/vadmin/assets/components";
import { assignedInfo, checkHis } from "@/api/vadmin/basic/base";

export default {
  name: "AssetsDetail",
  components: { FileUpload, maintain, file, Barcode, HistoryList, BorrowTooList, BorrowTooList1 },
  props: {
    topId: {
      type: Number,
      default: 0
    },
    chooseItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showQr: true,
      showBarCode: true,
      options: {
        displayValue: true,
        fontSize: 20,
        height: 40,
        width: 2
      },
      codeShow: false,
      codeValue: "",
      codeType: "code128",
      liuWarterList: [],
      categoryTypeName: "asset",
      chooseItemTwo: null,
      activeIndex: "1",
      title1: "",
      open1: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        kit: null,
        tag: "model"
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {
        kit: null,
        tag: "model",
        quantity: 2,
        id: null
      },
      compenentList: [],
      compenentSize: 0,
      licenseslist: [],
      whtotal: 0,
      fileTotal: 0,
      assetList: [],
      assetStatus: []
    };
  },
  mounted() {
    this.form.kit = this.topId;
    this.queryParams.kit = this.topId;
    this.chooseItemTwo = this.chooseItem;
    this.queryParams.bind_id = this.fileId;
    this.queryParams.category_type = this.categoryType;
    this.codeType = localStorage.getItem("codeType") ? localStorage.getItem("codeType") : "code128";
    this.showQr = localStorage.getItem("qrCode");
    this.showBarCode = localStorage.getItem("barCode");
    this.refreshData();
  },
  methods: {
    generateQRCode() {
      setTimeout(() => {
        QRCode.toCanvas(document.getElementById("canvas"), this.codeValue, function(error) {
          if (error) {
            console.error(error);
          } else {
            console.log("生成二维码成功");
          }
        });
      }, 500);
    },
    updateNumberXkz(val) {
      this.total = val;
    },
    updateNumberZj(val) {
      this.total1 = val;
    },
    updateNumberLsjl(val) {
      this.total3 = val;
    },
    changeData() {
      this.refreshData();
    },
    refreshData() {
      assignedInfo({ asset_type: "license", assigned_to_id: this.chooseItemTwo.id, assigned_type: "asset" }).then(res => {
        this.total = res.data.count;
      });
      assignedInfo({ asset_type: "component", assigned_to_id: this.chooseItemTwo.id, assigned_type: "asset" }).then(res => {
        this.total1 = res.data.count;
      });
      listMaintenances({ asset: this.chooseItemTwo.id }).then(response => {
        this.whtotal = response.data.count;
      });
      listUploads({ bind_id: this.chooseItemTwo.id, category_type: this.categoryTypeName }).then(response => {
        this.fileTotal = response.data.count;
      });
      // 获取借还记录的数据
      checkHis({ asset_id: this.chooseItemTwo.id, asset_type: "asset" }).then(res => {
        this.total3 = res.data.count;
      });
      this.getDicts("asset_status").then(response => {
        this.assetStatus = response.data;
        if (this.chooseItemTwo) {
          this.chooseItemTwo.status1 = this.selectDictLabel(this.assetStatus, this.chooseItemTwo.status);
        }
      });
      this.getList2();
    },
    createdLabel() {
      this.codeShow = true;
      this.codeValue = this.chooseItemTwo.asset_tag;
      this.codeType = localStorage.getItem("codeType") ? localStorage.getItem("codeType") : "code128";
      this.showQr = localStorage.getItem("qrCode") === "1";
      this.showBarCode = localStorage.getItem("barCode") === "1";

      this.generateQRCode();
    },
    // 许可证跳转
    clickLicenses(scope) {
      this.$router.push({ path: "/assets/licenses", query: { key: "needDetail", id: scope.row.license }});
    },
    // 资产组件跳转
    clickComponet(scope) {
      this.$router.push({ path: "/assets/components", query: { key: "needDetail", id: scope.row.component }});
    },
    getList2() {
      listAsset({ assigned_type: "asset", assigned_to_id: this.chooseItemTwo.id, pageNum: this.queryParams2.pageNum, pageSize: this.queryParams2.pageSize, deleted: false }).then(response => {
        this.assetList = response.data.results;
        this.assetList.filter(res => {
          res.status1 = this.selectDictLabel(this.assetStatus, res.status);
        });
        this.total2 = response.data.count;
      });
    },
    // 查询组件借还表
    getComponentList() {
      this.loading = true;
      listComponentrecords({ assigned_asset: this.chooseItemTwo.id, is_checkin: 0, pageNum: this.queryParams1.pageNum, pageSize: this.queryParams1.pageSize }).then(res => {
        this.compenentList = res.data.results;
        this.compenentSize = res.data.count;
        this.total1 = res.data.count;
        this.loading = false;
      });
    },
    updateNumberWh(number) {
      this.whtotal = number;
      this.refreshData();
    },
    updateNumberFile(number) {
      this.fileTotal = number;
      this.refreshData();
    },
    handleSelect(key, keyPath) {
      this.activeIndex = key + "";
      if (this.activeIndex === "3") {
        assignedInfo({ asset_type: "component", assigned_to_id: this.chooseItemTwo.id, assigned_type: "asset" }).then(res => {
          this.total1 = res.data.count;
        });
      } else if (this.activeIndex === "2") {
        assignedInfo({ asset_type: "license", assigned_to_id: this.chooseItemTwo.id, assigned_type: "asset" }).then(res => {
          this.total = res.data.count;
        });
      } else if (this.activeIndex === "4") {
        this.getList2();
      }
      this.$forceUpdate();
    },
    fanhui() {
      this.$emit("fanhui");
    }
  }
};
</script>
<style>
</style>
